﻿<MCard Class="mx-auto" Color="#26c6da" Dark MaxWidth="400">

    <MCardTitle>
        <MIcon Large Left>
            mdi-twitter
        </MIcon>
        <span class="text-h6 font-weight-light">Twitter</span>
    </MCardTitle>

    <MCardText Class="text-h5 font-weight-bold">
        "Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
    </MCardText>

    <MCardActions>
        <MListItem Class="grow">

            <MListItemAvatar Color="grey darken-3">
                <MImage Class="elevation-6"
                        alt=""
                        Src="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light">
                </MImage>
            </MListItemAvatar>

            <MListItemContent>
                <MListItemTitle>Evan You</MListItemTitle>
            </MListItemContent>

            <MRow Align=AlignTypes.Center Justify=JustifyTypes.End>
                <MIcon Class="mr-1">mdi-heart</MIcon>
                <span class="subheading mr-2">256</span>
                <span class="mr-1">·</span>
                <MIcon Class="mr-1">mdi-share-variant</MIcon>
                <span class="subheading">45</span>
            </MRow>

        </MListItem>
    </MCardActions>

</MCard>
